<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>Form Test</title>
<link rel="stylesheet" href="../css/form5.css" type="text/css" />

<script type="text/javascript" src="../liwe.js"></script>
<script type="text/javascript" src="../dom.js"></script>
<script type="text/javascript" src="../ajax_manager.js"></script>
<script type="text/javascript" src="../locale.js"></script>
<script type="text/javascript" src="../utils.js"></script>
<script type="text/javascript" src="../string_enh.js"></script>
<script type="text/javascript" src="../types.js"></script>
<script type="text/javascript" src="../form5.js"></script>
<script type="text/javascript" src="../validators.js"></script>
<script type="text/javascript" src="../event_manager.js"></script>

<script type="text/javascript">
function create_form ()
{
	liwe._libbase = "../";
	
	var f = new liwe.form5.instance ( 'test' );

	f.url = "http://localhost:8000/test.pyhp";

	f.set_groups ( [
		{ label: "Gruppo 1", name: "grp1" },
		{ label: "Gruppetto 2", name: "grp2" }
	] );

	f.add ( 'text',     'login', { label: "login:", mandatory: true, accesskey: 'l', size: 30, maxlength: 50, placeholder: "Insert login here", filter: "abcdefg", group: "grp1" } );
	f.add ( 'password', 'pass',  { label: "Password:", mandatory: true, accesskey: 'p', size: 30, maxlength: 50, group: "grp1" } );
	f.add ( 'email',    'email', { label: "E-Mail:", mandatory: true, accesskey: 'e', size: 30, maxlength: 50, group: "grp2" } );
	f.add ( 'textarea', 'txt',   { label: "Text", rows: 5, cols: 80, group: "grp2" } );
	f.add ( 'select',   'sel',   { label: "Select", options: [ { label: "Ciao", value: 1 }, { label: "Gruppo", value: [ { label: "el1", value: 9 }, { label: "el2", value: 2 } ]  },
				     { label: "tre", value: 3 } ], nonl: 0, group: "grp2", mandatory: true, force_select: true } );

	f.add ( 'select',   'sel2',   { label: "Select", options: [ { label: "Ciao", value: 1 }, { label: "Gruppo", value: [ { label: "el1", value: 9 }, { label: "el2", value: 2 } ]  },
				     { label: "tre", value: 3 } ], value: 9, size: 5, multiple: 1, group: "grp2" } );

	f.add ( 'checkbox', 'chk',   { label: "Checkbox", group: "grp2", checked: "1", accesskey: "c" } );

	f.add ( 'radio', 'rd',   { label: "Radio 1", group: "grp2", checked: "1", value: "1" } );
	f.add ( 'radio', 'rd',   { label: "Radio 2", group: "grp2", value: "2" } );
	f.add ( 'radio', 'rd',   { label: "Radio 3", group: "grp2", value: "3" } );

	f.add ( 'file',  "file", { label: "file", group: "grp2", multiple: "multiple" } );
	
	f.add ( 'submit', "submit", { value: "Invia", group: "grp2", nonl: 1 } );
	f.add ( 'reset',  "reset", { value: "Reset", group: "grp2" } );

	f.set ( 'my_form' );

	f.addEventListener ( "submit", function ( evt ) { return confirm ( "submit" ); } );
	f.addEventListener ( "reset",  function ( evt ) { return confirm ( "Resetto la form?" ); } );

	var f2 = new liwe.form5.instance ( 'test' );
	f2.add ( 'text', 'user', { label: 'Utente' } );
	f2.add ( 'password', 'pwd', { label: 'Password' } );
	f2.add ( 'submit', 'submit', { value : 'Invia' } );

	f2.set ( 'my_form2', '%(form-start)s<ul><li>%(user-label)s : %(user)s</li><li>%(pwd)s</li><li>%(submit)s</li></ul>%(form-end)s' );

}

function form_replace ()
{
	var frm = liwe.form5.replace ( 'frmreplace' );
}
</script>
</head> 
<body onload="create_form()">

<h2>Form 1</h2>
<div id="my_form"></div>
<h2>Form 2</h2>
<div id="my_form2"></div>

<h2>Form Replace</h2>
<div id="frmreplace">

<form method="post">
	<p>Txt : <input type="text" name="txt1" value="prova" /></p>
	<p>Pwd : <input type="password" name="pwd" /></p>
	<p>Check : <input type="checkbox" name="chk1" value="test" /></p>
	<p>
	Select :
	<select name="values">
		<option value="v1">Value 1</option>
		<option value="v2">Value 2</option>
		<option value="v3">Value 3</option>
		<option value="v4">Value 4</option>
	</select>
	</p>
	<input type="submit" />
</form>

<button onclick="form_replace()">Replace Form</button>

</div>



</body>
</html>
